<template>
  <div class="user_body">
    <div class="page_title"> 用户列表 </div>
    <div class="table_card">
      <a-table :columns="columns" :data="userList" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { getUserListAPI } from '@/api/login';
  import { ref, onMounted, reactive } from 'vue';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import { Message } from '@arco-design/web-vue';
  onMounted(() => {
    getUserList();
  });

  const reqUserList = reactive<{
    page: number;
    page_szie: number;
  }>({
    page: 1,
    page_szie: 10,
  });

  const userList = ref([]);
  const columns: TableColumnData[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: '名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      align: 'center',
    },
    {
      title: '更新时间',
      dataIndex: 'update_time',
      align: 'center',
    },
  ];
  const getUserList = async () => {
    try {
      const result = (await getUserListAPI(reqUserList)).data;
      userList.value = result.data.data;
    } catch (error) {
      Message.error('获取用户列表失败');
    }
  };
</script>

<style lang="scss" scoped>
  .user_body {
    padding: 20px;

    .page_title {
      margin-bottom: 15px;
      font-weight: bold;
      font-size: 20px;
    }

    .table_card {
      padding: 10px;
      background-color: #fff;
    }
  }
</style>
